<!DOCTYPE html>
<html lang="ko">
	<head>
		/*http://glyphicons.com*/
		<meta charset="utf-8">
		
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>07CSS스프라이트</title>
	</head>

	<body>
				<h1>07CSS스프라이트</h1>
				<p>스프라이트 이미지는 사이트에 사용하는 모든 이미지를 하나의 이미지 파일에 만들어 두고 position을 이용해 특정 부위의 이미지만 부여주는 기법</p>
				<p>웹에서 각각의 이미지를 불러오려면 http 요청이 각각 발생되고 내려받는데 시간이 소요되므로 전체 사이트 로딩시간이 지연됨<br />
					http 요청 발생으로 인해 웹서버 자원 사용 비용이 증가함
				</p>
				<p>CSS 스프라이트 기법을 사용하면 이러한 단점을 해결할 수 있음</p>
				<div style="width: 134px; height: 44px; background-image: url('images/sprites.gif')"> </div>
				<div style="width: 46px; height: 44px; background-image: url('images/sprites.gif')"> </div>
				<div style="width: 43px; height: 44px; background-image: url('images/sprites.gif'); background-position: -47px 0"> </div>
				<div style="width: 43px; height: 44px; background-image: url('images/sprites.gif'); background-position: -91px 0"> </div>

			<hr />
				<div style="width: 505px; height: 918px; background-image: url('images/iconsprite.PNG'); background-position: 50% 50%"> </div>
				<div style="width: 55px; height: 50px; background-image: url('images/iconsprite.PNG'); background-position: -100px -50px"> </div>
				<div style="width: 55px; height: 50px; background-image: url('images/iconsprite.PNG'); background-position: -50px -250px"> </div>
				<div style="width: 55px; height: 50px; background-image: url('images/iconsprite.PNG'); background-position: -100px -200px"> </div>
				
				
	</body>
</html>
